<template>
	<view style="background: #DCDFE6">
		<view class="cart-box-title">
			<u-icon name="map" size="60"></u-icon>
			<text>购物车</text>
		</view>
		<view class="goods-boxs">
			<view class="cart-title-list">
			<view class="text-title">
			产地直送
			</view>
				<text>预计24小时发货</text>
			</view>
			<view class="goods-detail" v-for="(item,index) in list" :key="index">
			
				<view class="detail-left">
					<view class="left">
						<checkbox-group @change="selected(item)">
							<checkbox  color="#E1027B"  :checked="item.is_check" />
						</checkbox-group>
						<image :src="item.goodsImage" mode="widthFix" style="width: 150rpx;"></image>
					</view>
					<view class="size">
						<text style="font-size: 25rpx;">【3包】全新最佳生鲜蔬菜500g*3袋{{item.size}}</text>
						<text style="color:#E1027B ;font-size: 10px;"> 包邮</text>
						<text class="goods-price">￥{{item.price}}/件</text>
					</view>
				</view>
				<view class="right">
					
					<text class="subtract" @click="reduce(item)">-</text>
					<text class="num">{{item.num}}</text>
					<text @click="add(item)" class="add">+</text>
				</view>
			</view>
		</view>
		<view style="height:160rpx"></view>
		<view class="end">
			<view class="end-left">
				<checkbox-group @change="selectedall()">
					<checkbox color="#E1027B" :checked="allchecked" />全选
				</checkbox-group>
				<view>合计:<text style="color: #E1027B;font-weight: bold;">￥ {{totalPrice}}</text></view>
			</view>
			<view class="end-right">
				结算({{totalNum}})
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				show: true,
				allchecked: true,
				// checked: true,
				list: app.globalData.car,
			}
		},
		onShow() {
			console.log("car")
			// console.log(this.$store.state.list);
			// console.log(app.globalData.car)
			// console.log(app);
			let test = this.list.every(item => {
				return item.is_check === true
			})
			if (test) {
				this.allchecked = true
			} else {
				this.allchecked = false
			}
		},
		methods: {
			selected(item) {
				item.is_check = !item.is_check
				if (!item.is_check) {
					this.allchecked = false;
				} else {
					// let count = 0;
					// this.size.forEach(value=>{
					// 	if(value.is_check){
					// 		count += 1;
					// 	}
					// });
					// console.log(count);
					// if(count == this.size.length){
					// 	this.allchecked = true;
					// }else{
					// 	this.allchecked = false;
					// }
					
					let test = this.list.every(item => {
						return item.is_check === true
					})
					if (test) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}
			},
			selectedall() {
				this.allchecked = !this.allchecked;
				if(this.allchecked){
					console.log(133233)
					this.list.forEach(item=>{
						item.is_check = true;
					});
				}else{
					this.list.forEach(item=>{
						item.is_check = false;
					});
				}
			},
			reduce(item) {
				let num = item.num;
				if (num > 0) {
					item.num -= 1
				} else {
					item.num = 0
					return
				} 
			},
			add(item) {
				console.log(item.num)
				let num = item.num
				item.num = num + 1
			}
		},
		computed: {
			//计算选中商品的总价
			totalNum() {
				let totalNum = 0;
				if(this.list.length>0){
					this.list.map(item => {
						item.is_check ? totalNum += item.num : totalNum += 0
					})
				}
				return totalNum
			},

			totalPrice() {
				let totalPrice = 0;
				if(this.list.length >0){
					this.list.map(item => {
						item.is_check ? totalPrice += item.num * item.price : totalPrice += 0
					});
				}
				return totalPrice
			}
		},
	}
</script>
<style lang="scss">
	.cart-box-title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		background: #FFFFFF;
	
		text {
			padding-left: 5px;
		}
	}
	.goods-boxs{
		
		.cart-title-list {
					display: flex;
					align-items: center;
					padding: 10px;
					border-radius: 5px;		
					background: #fff;
						border-bottom: 1px solid #DCDFE6;
					.text-title{
						font-size: 14px;
						color: #19BE6B;
					
					}
						text {
							padding-left: 10px;
							font-size: 12px;
							color: gray;							border-bottom: 1px soild #E4E7ED;
					}
				}
		
		margin: 5px;
	.goods {
		line-height: 80rpx;
		background-color: #fff;

		&-detail {
			display: flex;
			padding: 5px;
			background-color: #fff;
			justify-content: space-between;
			border-bottom: 5rpx solid #F1F1F1;
			align-items: center;

			.detail-left {
				display: flex;

				.left {
					display: flex;
					align-items: center;
					margin: 2px;
				}
			}

			.size {
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				margin-left: 5px;

				.goods-price {
					font-size: 25rpx;
					color: #E1027B;
					margin-bottom: 5px;

				}
			}

			.right {
				display: flex;
				align-self: flex-end;
				margin-bottom: 5px;
				text {
					width: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background-color: #F7F7F7;
					margin-right: 10rpx;
					font-size: 12px;
				}

				.add {
					color: #E1027B;
					border-radius: 10rpx 30rpx 30rpx 10rpx;
					margin-right: 20rpx;
				}

				.subtract {
					border-radius: 30rpx 10rpx 10rpx 30rpx;
				}
			}
		}
}
	}

	.end {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		position: fixed;
		// position: sticky;
		bottom: 100rpx;
		left: 0;
		display: flex;
		align-items: center;
		position: flexed;
		height: 80px;
		bottom: 0;
		left: 0;
		width: 100%;

		&-left {
			width: 70%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			.end-flex {
				display: flex;
				align-items: center;
			}
		}

		&-right {
			width: 30%;
			line-height: 90rpx;
			background-color: #E1027B;
			text-align: center;
			color: #fff;
			border-radius: 25px;
			margin: 5px;
		}
	}
</style>
